/*
 * @Author: mayijun
 * @Date: 2022-06-29 13:37:15
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-09 17:57:13
 */
//绑定维度下拉选择标签组件
import { computed, defineComponent, onMounted, reactive, watch, watchEffect } from 'vue';
import './index.scss';
import { RemoveFilled } from '@element-plus/icons-vue';
import { ElIcon, ElInput, ElOption, ElSelect } from 'element-plus';
import { useStore } from '@/store';
import API from '@/services';

const DimensionSelectTag = defineComponent({
  name: 'DimensionSelectTag',
  components: {
    RemoveFilled
  },
  props: {
    tagData: {
      type: Object,
      default: () => ({})
    },
    parentNode: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['removeNode'],
  setup: (props, { slots, attrs, emit }) => {
    const store = useStore();

    let state = reactive({
      dialogVisible: false,
      textOptions: [] as any[],
      dimensionList: [] as any[]
    });

    // 获取文本型操作枚举
    const getTextOptions = async () => {
      const { code, data } = await API.enumBao.getComparisonEnum({
        type: 'TEXT'
      });
      if (code === 200 && Array.isArray(data)) {
        state.textOptions = data.filter(
          (item) =>
            item.value != 'like' &&
            item.value != 'not like' &&
            item.value != '='
        );
      } else {
        console.log('获取textOptions失败');
      }
    };

    // 获取维度操作枚举
    const getDimensionEnum = async (content?: string) => {
      const { code, data } = await API.taskManagerV1.postGetDimensionEnum({
        id: props.tagData.id,
        dataTypeId: props.tagData.dataTypeId,
        typeId: 2,
        content: content
      });
      if (code === 200 && Array.isArray(data)) {
        state.dimensionList = data;
      } else {
        console.log('获取getDimensionEnum失败');
      }
    };

    //远程搜索
    const remoteMethod = (query: string) => {
      getDimensionEnum(query);
    };

    const visibleChange = (val: boolean) => {
      if (!val) {
        getDimensionEnum();
      }
    };

    //删除节点
    const removeNode = (tagData: any, parentNode: any) => {
      emit('removeNode', tagData, parentNode);
    };

    watch(
      state.textOptions,
      (val: any) => {
        if (!val || val.length === 0) {
          getTextOptions();
          getDimensionEnum();
        }
      },
      {
        immediate: true
      }
    );

    onMounted(() => {
      console.log(props.tagData, '传来的数据')
      if (props.tagData.dimensionType) {
        let arr: any = [];
        props.tagData.value.forEach((item: any, index: number) => {
          if (item) {
            let obj = {
              value: props.tagData.value[index],
              label: props.tagData.content[index]
            };
            arr.push(obj);
          }
        });
        props.tagData.value = arr;
      }
    })

    return () => {
      return (
        <div class="restrict-tag-enum-wrap">
          <div class="tag-item tag-label">
            <div class="label-dis-wrap">{props.tagData.cnName}</div>
            <span
              class="remove-icon-wrap"
              onClick={() => {
                removeNode(props.tagData, props.parentNode);
              }}
            >
              <ElIcon>
                <RemoveFilled />
              </ElIcon>
            </span>
          </div>
          <div class="tag-operator">
            <ElSelect
              v-model={props.tagData.operator}
              placeholder="请选择"
              size="large"
            >
              {state.textOptions.map((item: any) => (
                <ElOption
                  key={item.value}
                  label={item.label}
                  value={item.value}
                >
                  <span style="float: left">{item.label}</span>
                </ElOption>
              ))}
            </ElSelect>
          </div>
          <div class="tag-input">
            <ElSelect
              v-model={props.tagData.value}
              placeholder="请选择"
              size="large"
              collapse-tags
              collapse-tags-tooltip
              multiple
              filterable
              remote
              reserve-keyword
              remote-method={remoteMethod}
              value-key="value"
              onVisible-change={visibleChange}
            >
              {state.dimensionList.map((item: any) => (
                <ElOption key={item.value} label={item.label} value={item}>
                  <span style="float: left">{item.label}</span>
                </ElOption>
              ))}
            </ElSelect>
          </div>
        </div>
      );
    };
  }
});

export default DimensionSelectTag;
